import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Flex ,Toast} from "antd-mobile";
import s from "./index.scss";
import AxFooter from 'components/Footer'
import AxHeader from 'components/AxHeader'
import { callApi } from "app/utils";
import shibaiPng from "assets/images/shibai.png";
import {hashHistory} from 'React-Router'
let flag = true;

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      info:{},
      list:[],
      reqData:{
        token: JSON.parse(localStorage.getItem('userData')).token,
        page: 1,
        pageSize: 15,
      }
    };
    this.handleScrollMore = this.handleScrollMore.bind(this);
  }

  componentDidMount() {
    window.addEventListener("scroll", this.handleScrollMore,true);
    this.requestList(this.state.reqData,1)
  }

  requestList(item,cur){
    callApi('/account/moneyrecord',item,"POST").then((data)=>{
      if(data.success==true){
        if(cur==1){
          this.setState({
            info:data.data,
            list:data.data.moneyRecord
          })
        }else if(cur==2){
          if(JSON.stringify(data.data)=='{}'){
            Toast.info('没有更多数据了',1)
          }else{
            let tempList = this.state.list.concat(data.data.moneyRecord);
            this.setState({
                  list: tempList
                });
          }
      
              flag = true
        }
        
      }
    })
  }
  
  handleScrollMore() {
   if($(window).scrollTop()!=0){
     if ($(window).scrollTop() + window.innerHeight >= document.documentElement.scrollHeight-50&&flag == true) {
       flag = false
       let page = this.state.reqData.page;
       page++;
       this.setState({
        reqData: {
          token: JSON.parse(localStorage.getItem('userData')).token,
          page: page,
          pageSize:15,
        }
      });
      this.requestList(this.state.reqData,2)
       
     }
   }
   
 }

  itemStr(item,index){
    return (
      <Flex.Item key={index} className={`${s.item}`}>
          <Flex.Item className={`${s.img} flex2`}>
          {item.tradeType<1000?<span className={`${s.shou}`}>收</span>:<span className={`${s.zhi}`}>支</span>}
          </Flex.Item>
          <Flex.Item className={`${s.content} flex8`}>
              <Flex.Item className={`${s.left}`}>
                    <Flex.Item className={`${s.top}`}>
                      {item.mtype}
                    </Flex.Item>
                    <Flex.Item className={`${s.bot}`}>
                    {item.tradeTime}
                    </Flex.Item>
              </Flex.Item>
              <Flex.Item className={`${s.right} color2`}>
                    ¥{item.amount}
              </Flex.Item>
          </Flex.Item>
      </Flex.Item>
    )
  }

    //销毁时解绑事件
    componentWillUnmount() {
      window.removeEventListener("scroll", this.handleScrollMore,true);
      //重写组件的setState方法，直接返回空
      this.setState = (state,callback)=>{
        return;
      };  
    }

  render() {
    let {list} = this.state
    let str
    if(JSON.stringify(list)!='[]'&&list!=undefined){
      str = list.map((item,index)=>{
        return this.itemStr(item,index)
    })
    }else{
      str = (
        <Flex className={`nullBox`} direction="column">
            <Flex.Item className={`nullItem flex8`}><img src={shibaiPng} /></Flex.Item>
            <Flex.Item className={`nullItem flex1`}>暂无投资记录</Flex.Item>
            <Flex.Item className={`nullItem flex1`}><div className={`btn`} onClick={()=>{
              hashHistory.push('/projectList')
            }}>去投资</div></Flex.Item>
        </Flex>
      )
      
    }
    
    return (
      <div className={`${s.capitalFlowBox}`}>
        <div style={{width:"100%",height:'100vh'}}>
        <AxHeader/>
        <Flex direction="column" className={`${s.listBox}`}>
        {str}
        </Flex>
        
        </div>
        
       
      
      </div>
    );
  }
}
